<template>
  <div class="vehicle">
    <div class="vehicle_add" @click="toVehicleAdd">新增&nbsp;+</div>
    <div class="vehicle_shell">
      <ul>
        <li v-for="(item,index) in list" @click="choose(index)">
          <span v-bind:for="item.id">{{item.car_name}} {{item.car_models}} {{item.type_name}} {{item.car_num}}</span>
          <i class="icon iconfont icon-meixuanzhong2" v-if="item.is_default == '0'"></i>
          <i class="icon iconfont icon-xuanzhong" v-else></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: "vehicle",
  data () {
    return {
      list: [],
    }
  },
  beforeMount(){
    this.getInfo();
  },
  mounted() {
    this.$root.share();
  },
  methods: {
    toVehicleAdd(index){
      this.$router.push({
        name: 'VehicleAdd',
        params: {
          id: 0
        }
      })
    },
    choose(index){
      console.log('----'+JSON.stringify(this.list[index]));
      global.order.car.id = this.list[index].id;
      sessionStorage.setItem('carId', this.list[index].id);
      // global.order.car.type = this.list[index].car_type;
      global.order.car.type = this.list[index].type_name;
      global.order.car.models = this.list[index].car_models;
      global.order.car.name = this.list[index].car_name;  
      global.order.car.num = this.list[index].car_num;
      this.$router.go(-1)
    },
    getInfo(){
      var that = this;
      console.log(localStorage.getItem('carWashUuid'));
      console.log(sessionStorage.getItem('carWashUuid'));
      axios.get(global.api.carMine.car,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
        }
      })
      .then(function(res){
        console.log("then");
        console.log(res);
        that.list = res.data.data;
      })
      .catch(function(res){
        console.log("catch");
        console.log(res);
      })
    },

  },
}
</script>
  
<style scoped>
  input:focus,select:focus,button:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .vehicle_add{
    line-height: 2.3rem;
    text-align: right;
    background-color: #E4E4E6;
    padding-right: 0.5rem;
  }
  .vehicle_shell {
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  .vehicle_subtit {
    text-align: left;
    padding-left: 6%;
    padding-top: 1rem;
    font-size: 1.1rem;
  }
  .vehicle_shell ul {}
  .vehicle_shell li {
    width: 90%;
    margin: 0 auto;
    padding-left: 1rem;
    border-bottom: 1px solid #B3B3B4;
    line-height: 3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: #595757;
  }
  .vehicle_shell li:last-child {
    border-bottom: none;
  }
  .vehicle_shell span {}
  .vehicle_shell input {}
  .iconfont{
    font-size: 1.2rem;
    color: #7D7D7D;
  }
  .icon-xuanzhong{
    color: #2ecc80;
  }
  .v_btn{
    width: 8rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background-color: #2ecc80;
    color: #fff;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    margin: 2rem 0 1rem;
  }
</style> 
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
</style>
